<template>
	<view class="select-vehicle-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="选择车辆" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container"></view>

		<!-- 主要内容区域 -->
		<view class="content">
			<view class="vehicle-list">
				<view 
					class="vehicle-item" 
					v-for="(vehicle, index) in vehicleList" 
					:key="index"
					@click="selectVehicle(index)">
					<view class="vehicle-image-wrapper">
						<image :src="vehicle.image" mode="aspectFill" class="vehicle-image"></image>
					</view>
					<view class="vehicle-info">
						<text class="vehicle-model">车型: {{ vehicle.model }}</text>
						<text class="vehicle-plate">车牌: {{ vehicle.plate }}</text>
					</view>
					<view class="vehicle-selector">
						<image 
							:src="selectedIndex === index ? '/static/组 5 拷贝@2x.png' : '/static/椭圆 4 拷贝 2@2x.png'"
							mode="aspectFit"
							class="selector-image">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部添加车辆按钮 -->
		<view class="add-vehicle-btn" @click="showAddModal = true">
			<image src="/static/加号@2x.png" mode="aspectFit" class="add-icon"></image>
			<text class="add-vehicle-text">添加车辆</text>
		</view>

		<!-- 添加车辆弹窗 -->
		<view class="add-modal-overlay" v-if="showAddModal" @click="closeAddModal">
			<view class="add-modal-content" @click.stop>
				<!-- 弹窗头部 -->
				<view class="add-modal-header">
					<text class="add-modal-title">添加车辆</text>
					<view class="add-modal-close" @click="closeAddModal">
						<uni-icons type="close" size="20" color="#333333"></uni-icons>
					</view>
				</view>

				<!-- 表单内容 -->
				<view class="add-modal-body">
					<!-- 车辆图片 -->
					<view class="form-item">
						<text class="form-label">车辆图片</text>
						<view class="image-upload" @click="chooseImage">
							<image v-if="formData.image" :src="formData.image" mode="aspectFill" class="uploaded-image"></image>
							<view v-else class="upload-placeholder">
								<uni-icons type="plus" size="24" color="#999999"></uni-icons>
								<text class="upload-text">点击上传</text>
							</view>
						</view>
					</view>

					<!-- 车型 -->
					<view class="form-item">
						<text class="form-label">车型</text>
						<input 
							class="form-input" 
							v-model="formData.model" 
							placeholder="请输入车型"
							placeholder-style="color: #999999" />
					</view>

					<!-- 车牌 -->
					<view class="form-item">
						<text class="form-label">车牌号</text>
						<input 
							class="form-input" 
							v-model="formData.plate" 
							placeholder="请输入车牌号"
							placeholder-style="color: #999999" />
					</view>
				</view>

				<!-- 弹窗底部 -->
				<view class="add-modal-footer">
					<view class="modal-btn cancel-btn" @click="closeAddModal">
						<text class="modal-btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @click="confirmAdd">
						<text class="modal-btn-text">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const vehicleList = ref([
		{
			model: '奔驰-GR',
			plate: '豫M35468',
			image: '/static/mi-utrl.jpg'
		},
		{
			model: '小米utrl',
			plate: '豫E35468',
			image: '/static/mi-utrl.jpg'
		}
	])
	
	const selectedIndex = ref(0)
	const showAddModal = ref(false)
	const formData = ref({
		model: '',
		plate: '',
		image: ''
	})
	
	const goBack = () => {
		// 获取选中的车辆信息
		const selectedVehicle = vehicleList.value[selectedIndex.value]
		// 通过事件总线发送选中的车辆信息
		uni.$emit('vehicleSelected', {
			model: selectedVehicle.model,
			plate: selectedVehicle.plate,
			image: selectedVehicle.image,
			name: `${selectedVehicle.model}/${selectedVehicle.plate}`
		})
		uni.navigateBack()
	}
	
	const selectVehicle = (index) => {
		selectedIndex.value = index
		// 选择后立即返回
		const selectedVehicle = vehicleList.value[index]
		uni.$emit('vehicleSelected', {
			model: selectedVehicle.model,
			plate: selectedVehicle.plate,
			image: selectedVehicle.image,
			name: `${selectedVehicle.model}/${selectedVehicle.plate}`
		})
		uni.navigateBack()
	}
	
	const closeAddModal = () => {
		showAddModal.value = false
		// 重置表单
		formData.value = {
			model: '',
			plate: '',
			image: ''
		}
	}
	
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				formData.value.image = res.tempFilePaths[0]
			}
		})
	}
	
	const confirmAdd = () => {
		if (!formData.value.model.trim()) {
			uni.showToast({
				title: '请输入车型',
				icon: 'none'
			})
			return
		}
		if (!formData.value.plate.trim()) {
			uni.showToast({
				title: '请输入车牌号',
				icon: 'none'
			})
			return
		}
		
		// 添加车辆到列表
		vehicleList.value.push({
			model: formData.value.model.trim(),
			plate: formData.value.plate.trim(),
			image: formData.value.image || '/static/mi-utrl.jpg'
		})
		
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		})
		
		closeAddModal()
	}
</script>

<style lang="scss" scoped>
	.select-vehicle-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 80px;
	}

	.nav-container {
		height: 100px;
		background-color: #007AFF;
		width: 100%;
	}

	.content {
		padding-top: 0;
		margin-top: -110px;
		padding: 15px;
	}


	/* 车辆列表 */
	.vehicle-list {
		margin-top: 20px;
	}

	.vehicle-item {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.vehicle-image-wrapper {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
		flex-shrink: 0;
	}

	.vehicle-image {
		width: 100%;
		height: 100%;
	}

	.vehicle-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.vehicle-model {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 8px;
	}

	.vehicle-plate {
		font-size: 14px;
		color: #666666;
	}

	.vehicle-selector {
		margin-left: 15px;
		flex-shrink: 0;
	}

	.selector-image {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
	}

	/* 底部添加车辆按钮 */
	.add-vehicle-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		padding-bottom: calc(15px + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		background-color: #ffffff;
	}

	.add-vehicle-btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 15px;
		right: 15px;
		height: 35px;
		transform: translateY(-50%);
		background-image: url('/static/矩形 10@2x.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 999px;
		z-index: -1;
	}

	.add-icon {
		width: 18px;
		height: 18px;
		margin-right: 8px;
		position: relative;
		z-index: 1;
	}

	.add-vehicle-text {
		font-size: 16px;
		color: #ffffff;
		font-weight: 500;
		position: relative;
		z-index: 1;
	}

	/* 添加车辆弹窗 */
	.add-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.add-modal-content {
		background-color: #ffffff;
		border-radius: 15px;
		width: 85%;
		max-width: 500px;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.add-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.add-modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	.add-modal-close {
		padding: 5px;
		cursor: pointer;
	}

	.add-modal-body {
		flex: 1;
		padding: 20px;
		overflow-y: auto;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 14px;
		color: #333333;
		margin-bottom: 10px;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 44px;
		background-color: #f5f5f5;
		border-radius: 8px;
		padding: 0 15px;
		font-size: 14px;
		color: #333333;
		box-sizing: border-box;
	}

	.image-upload {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		cursor: pointer;
		border: 1px dashed #d0d0d0;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
	}

	.add-modal-footer {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.modal-btn {
		flex: 1;
		padding: 15px;
		text-align: center;
		cursor: pointer;
	}

	.cancel-btn {
		border-right: 1px solid #f0f0f0;
	}

	.cancel-btn:active {
		background-color: #f5f5f5;
	}

	.confirm-btn {
		background-color: #007AFF;
	}

	.confirm-btn:active {
		background-color: #0056D6;
	}

	.modal-btn-text {
		font-size: 16px;
		color: #333333;
	}

	.confirm-btn .modal-btn-text {
		color: #ffffff;
		font-weight: 500;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

